/**
 * Created by imac13 on 19/1/5.
 */
import React,{ Component } from 'react';
import {Card,Row,Col,Modal} from 'antd';

class Gallery extends Component {
    constructor (props) {
        super(props);
        this.state = {
            imgs:[
                ['1.png','2.png','3.png','4.png','5.png'],
                ['6.png','7.png','8.png','9.png','10.png'],
                ['11.png','12.png','13.png','14.png','15.png'],
                ['16.png','17.png','18.png','19.png','20.png'],
                ['21.png','22.png','23.png','24.png','25.png'],
            ],
            modal:false
        };
    }
    openGallery = (imgSrc) => {
        this.setState({
            modal:true,
            currentImg:'/gallery/'+imgSrc
        })

    };
    render(){
        const imgList = this.state.imgs.map((list) => list.map((item) =>
            <Card
                hoverable
                style={{ width: 240 ,marginBottom:10}}
                cover={<img src={'/gallery/'+item } onClick={()=>this.openGallery(item)} alt="" />}
            >
                <Card.Meta
                    title="React Admin"
                    description="I Love Imooc!"
                />
            </Card>
        ));
        return(
            <div  className="card-wrapper">
                <Row gutter={10}>
                    <Col md={5}>{imgList[0]}</Col>
                    <Col md={5}>{imgList[1]}</Col>
                    <Col md={5}>{imgList[2]}</Col>
                    <Col md={5}>{imgList[3]}</Col>
                    <Col md={4}>{imgList[4]}</Col>
                </Row>
                <Modal
                    title="React Admin"
                    width={300}
                    height={500}
                    footer={null}
                    visible={this.state.modal}
                    onCancel={()=>{
                        this.setState({
                            modal:false
                        })
                    }}
                >
                    <img src={this.state.currentImg} alt="" style={{width:'100%'}}/>
                </Modal>
            </div>
        )
    }
}

export default Gallery;